import 'package:example/video_editor/video_editor_view_model.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:jui/jui.dart';
import 'package:zz_video_maker/zz_video_maker.dart';

extension VideoEditorViewModelTransition on VideoEditorViewModel {
  void transition(BuildContext context, {int? index}) {
    var viewModel = this;
    EditedMedia? editedMedia = index == null
        ? viewModel.currentEditedMedia
        : viewModel.allEditedData?.editedMediaList[index];
    List<TransitionData> list =
        ResourceManager.getInstance().getAllTransitions();

    JUIBottomSheet.showPageContent(
      expand: false,
      barrierColor: Colors.transparent,
      context: context,
      contentBuilder: (context) {
        return Container(
          height: 400,
          padding: const EdgeInsets.all(16),
          child: GetBuilder<VideoEditorViewModel>(
            id: 'transition',
            builder: (_) {
              return GridView(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4),
                children: [
                      JUIButton(
                        onPressed: () {
                          editedMedia?.transition = null;
                          viewModel.update(['transition']);
                        },
                        child: Text(
                          '无',
                          style: TextStyle(
                              color: editedMedia?.transition == null
                                  ? Colors.red
                                  : Theme.of(context).primaryColor),
                        ),
                      )
                    ] +
                    list.map((e) {
                      var isSelected = editedMedia?.transition?.key == e.key;
                      return JUIButton(
                        onPressed: () {
                          editedMedia?.transition = e;
                          viewModel.update(['transition']);
                        },
                        child: Text(
                          e.key,
                          style: TextStyle(
                              color: isSelected
                                  ? Colors.red
                                  : Theme.of(context).primaryColor),
                        ),
                      );
                    }).toList(),
              );
            },
          ),
        );
      },
    );
  }
}
